<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>kyber-validator</title>
    <style>
        .form-wrap {
            width: 400px;
            margin: 0 auto;
        }

        .form-inner .form-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .form-inner .form-item .form-item__label {
            text-align: right;
            vertical-align: middle;
            float: left;
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            padding: 0 12px 0 0;
            box-sizing: border-box;
        }

        .form-inner .form-item .form-item__content {
            position: relative;
            flex: 1;
        }

        .form-inner .form-item input,
        .form-inner .form-item select {
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: none;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            width: 100%;
        }

        .el-form-item__error {
            color: #f56c6c;
            font-size: 12px;
            line-height: 1;
            padding-top: 4px;
            position: absolute;
            top: 100%;
            left: 0;
        }
    </style>
</head>

<body>
    <h1>Kyber-Mom-Validator</h1>
    <div class="form-wrap">
        <form action="" class="form-inner">
            <div class="form-item">
                <span class="form-item__label">标签</span>
                <div class="form-item__content">
                    <input type="text">
                    <div class="el-form-item__error">错误信息</div>
                </div>
            </div>
            <div class="form-item">
                <span class="form-item__label">标签</span>
                <div class="form-item__content">
                    <select name="" id="">
                        <option value="1">男</option>
                        <option value="1">女</option>
                    </select>
                </div>
            </div>
            <div class="form-item">
                <span class="form-item__label">标签</span>
                <div class="form-item__content">
                    <input type="text">
                </div>
            </div>
            <div class="form-item">
                <span class="form-item__label">标签</span>
                <div class="form-item__content">
                    <input type="text">
                </div>
            </div>
        </form>
    </div>
    <script type="module">
        import { Validator } from './dist/index.js';
        const v1 = new Validator({
            realName: {
                pattern: 'cnName',
                params: ['姓名']
            },
            age: {
                pattern: 'rangeNumber',
                params: ['年龄', 18, 60],
            },
            phone: {
                pattern: 'phone',
                params: ['联系电话']
            },
            like: {
                required: true,
                pattern: 'include',
                params: ['爱好', ['吃饭', '睡觉', '打豆豆']],
            },
            remark: {
                required: true,
                pattern: 'rangeLength',
                params: ['备注信息', 10, 15],
            },
            nickName: {
                params: ['昵称'],
                // 自定义验证器
                validator: function (value, rule, cb) {
                    // 模拟异步
                    if (value === 'admin') {
                        setTimeout(() => {
                            cb(new Error('昵称已存在'))
                        }, 1500);
                        return;
                    }
                    cb();
                }
            },
        });

        // 错误事件
        v1.onError((field, message, data) => {
            console.log("onError 回调：", field)
        });

        // 成功事件
        v1.onSuccess((field) => {
            console.log("onSuccess 回调：", field)
        });

        v1.validate({
            nickName: 'admin',
            realName: '张三',
            age: 15,
            phone: '13566667777',
            like: '吃饭1',
            remark: '备注备注~~'
        }, function (result, err) {
            if (result) {
                // 成功...
                console.log('success！')
            } else {
                console.log('error', err)
            }
        });
        console.log(v1)
    </script>
</body>

</html>
